<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>Cesium Mobile</title>
    <script src="Cesium/Cesium.js"></script>
    <style>
        @import url(Cesium/Widgets/widgets.css);
        html, body, #cesiumContainer {
            height: 100%; margin: 0; padding: 0; overflow: hidden;
        }
		#toolbar{
			margin: 5px;
			padding: 2px 5px;
			position: absolute;
			z-index:1;
		}	
    </style>
</head>
<body>
<div id="toolbar">
	<select class="cesium-button" onchange="selectChange(this.value)">
		<option value="reset" selected = "selected">原始色</option>
		<option value="height" onclick="colorByHeight()">高度设色</option>
		<option value="area" onclick="colorByArea()">面积设色</option>
		<option value="lat" onclick="colorByLatitude()">纬度设色</option>
		<option value="distance" onclick="colorByDistance()">距离设色</option>
		<option value="name" onclick="colorByNameRegex()">名字设色</option>
		<option value="hide" onclick="hideByHeight()">高度隐藏</option>
	</select>
</div>
<div id="cesiumContainer"></div>
<script>
	function selectChange(value){
		switch(value){
			case 'reset':
				resetStyle();
				break;
			case 'height':
				colorByHeight();
				break;
			case 'area':
				colorByArea();
				break;
			case 'lat':
				colorByLatitude();
				break;
			case 'distance':
				colorByDistance();
				break;
			case 'name':
				colorByNameRegex();
				break;
			case 'hide':
				hideByHeight();
				break;
			default:
				break;
		}
	}
    var viewer = new Cesium.Viewer('cesiumContainer',{
		animation:false,
		timeline:false,
		vrButton:true
	});
	document.getElementsByClassName('cesium-credit-textContainer')[0].style.display='none';
	// Set the initial camera view to look at Manhattan
	var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
	var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
	viewer.scene.camera.setView({
		destination: initialPosition,
		orientation: initialOrientation,
		endTransform: Cesium.Matrix4.IDENTITY
	});

	// Load the NYC buildings tileset.
	var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
		url: 'https://beta.cesium.com/api/assets/1461?access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkYWJmM2MzNS02OWM5LTQ3OWItYjEyYS0xZmNlODM5ZDNkMTYiLCJpZCI6NDQsImFzc2V0cyI6WzE0NjFdLCJpYXQiOjE0OTkyNjQ3NDN9.vuR75SqPDKcggvUrG_vpx0Av02jdiAxnnB1fNf-9f7s'
	}));
	
	// Color buildings based on their height.
	function resetStyle() {
		tileset.style = undefined;
	}
	// Color buildings based on their height.
	function colorByHeight() {
		tileset.style = new Cesium.Cesium3DTileStyle({
			color: {
				conditions: [
					["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
					["${height} >= 200", "rgb(102, 71, 151)"],
					["${height} >= 100", "rgb(170, 162, 204)"],
					["${height} >= 50", "rgb(224, 226, 238)"],
					["${height} >= 25", "rgb(252, 230, 200)"],
					["${height} >= 10", "rgb(248, 176, 87)"],
					["${height} >= 5", "rgb(198, 106, 11)"],
					["true", "rgb(127, 59, 8)"]
				]
			}
		});
	}

	// Color buildings by their total area.
	function colorByArea() {
		tileset.style = new Cesium.Cesium3DTileStyle({
			color: "mix(color('yellow'), color('red'), min(${area} / 10000.0, 1.0))"
		});
	}

	// Color buildings by their latitude coordinate.
	function colorByLatitude() {
		tileset.style = new Cesium.Cesium3DTileStyle({
			color: {
				conditions: [
					["${latitude} >= 0.7125", "color('purple')"],
					["${latitude} >= 0.712", "color('red')"],
					["${latitude} >= 0.7115", "color('orange')"],
					["${latitude} >= 0.711", "color('yellow')"],
					["${latitude} >= 0.7105", "color('lime')"],
					["${latitude} >= 0.710", "color('cyan')"],
					["true", "color('blue')"]
				]
			}
		});
	}

	// Color buildings by distance from a landmark.
	function colorByDistance() {
		tileset.style = new Cesium.Cesium3DTileStyle({
			defines : {
				distance : "distance(vec2(${longitude}, ${latitude}), vec2(-1.291777521, 0.7105706624))"
			},
			color : {
				conditions : [
					["${distance} > 0.0002", "color('gray')"],
					["true", "mix(color('yellow'), color('green'), ${distance} / 0.0002)"]
				]
			}
		});
	}

	// Color buildings with a '3' in their name.
	function colorByNameRegex() {
		tileset.style = new Cesium.Cesium3DTileStyle({
			color : "(regExp('3').test(${name})) ? color('cyan', 0.9) : color('purple', 0.1)"
		});
	}

	// Show only buildings greater than 200 meters in height.
	function hideByHeight() {
		tileset.style = new Cesium.Cesium3DTileStyle({
			show : "${height} > 200"
		});
	}
</script>
<script src="js/hammer.min.js"></script>
<script src="js/event.js"></script>
</body>
</html>